<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MCP Server 自动生成平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { padding: 20px; }
        .container { max-width: 800px; }
        .form-group { margin-bottom: 15px; }
        #paramsContainer { margin-top: 15px; }
        .param-row { margin-bottom: 10px; }
        .alert { margin-top: 20px; display: none; }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center mb-4">MCP Server 自动生成平台</h1>

        <div class="alert alert-success" id="successAlert">
            <strong>成功!</strong> 操作已成功完成。
        </div>

        <div class="alert alert-danger" id="errorAlert">
            <strong>错误!</strong> 操作失败。
        </div>

        <form id="mcpServerForm" class="border p-4 rounded shadow">
            <div class="form-group">
                <label for="serverName">MCP Server 名称:</label>
                <input type="text" class="form-control" id="serverName" name="serverName" required placeholder="例如: ScriptExecutor">
            </div>

            <div class="form-group">
                <label for="machineDomain">机器域名:</label>
                <input type="text" class="form-control" id="machineDomain" name="machineDomain" required placeholder="例如: eshoptools-liwenzhe-03.dev.kwaidc.com">
            </div>

            <div class="form-group">
                <label for="scriptPath">脚本路径:</label>
                <input type="text" class="form-control" id="scriptPath" name="scriptPath" required placeholder="例如: /home/user/scripts">
            </div>

            <div class="form-group">
                <label for="startCommand">启动命令:</label>
                <input type="text" class="form-control" id="startCommand" name="startCommand" required placeholder="例如: python script.py">
            </div>

            <div class="form-group">
                <label>参数:</label>
                <button type="button" class="btn btn-secondary mb-2" id="addParamBtn">添加参数</button>
                <div id="paramsContainer"></div>
            </div>

            <div class="form-group">
                <label for="deployMachineIp">部署机器IP:</label>
                <input type="text" class="form-control" id="deployMachineIp" name="deployMachineIp" required placeholder="例如: 192.168.1.100">
            </div>

            <div class="text-center mt-4">
                <button type="button" class="btn btn-primary" id="generateCodeBtn">仅生成代码</button>
                <button type="button" class="btn btn-success" id="createAndDeployBtn">创建并部署</button>
                <button type="button" class="btn btn-info" id="initializeSshBtn">初始化SSH密钥</button>
            </div>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let paramCount = 0;

            // 添加参数按钮点击事件
            document.getElementById('addParamBtn').addEventListener('click', function() {
                paramCount++;
                const paramRow = document.createElement('div');
                paramRow.className = 'param-row d-flex gap-2';
                paramRow.innerHTML = `
                    <input type="text" class="form-control param-name" placeholder="参数名称" required>
                    <input type="text" class="form-control param-default" placeholder="默认值">
                    <button type="button" class="btn btn-danger remove-param-btn">删除</button>
                `;
                document.getElementById('paramsContainer').appendChild(paramRow);

                // 删除参数按钮点击事件
                paramRow.querySelector('.remove-param-btn').addEventListener('click', function() {
                    paramRow.remove();
                });
            });

            // 显示消息
            function showMessage(alertId, message, isSuccess) {
                const alert = document.getElementById(alertId);
                alert.querySelector('strong').nextSibling.textContent = ' ' + message;
                alert.style.display = 'block';
                alert.className = isSuccess ? 'alert alert-success' : 'alert alert-danger';

                // 3秒后隐藏
                setTimeout(() => {
                    alert.style.display = 'none';
                }, 3000);
            }

            // 收集表单数据
            function collectFormData() {
                const formData = {
                    serverName: document.getElementById('serverName').value,
                    machineDomain: document.getElementById('machineDomain').value,
                    scriptPath: document.getElementById('scriptPath').value,
                    startCommand: document.getElementById('startCommand').value,
                    deployMachineIp: document.getElementById('deployMachineIp').value,
                    parameters: {}
                };

                // 收集参数
                document.querySelectorAll('.param-row').forEach(row => {
                    const name = row.querySelector('.param-name').value;
                    const defaultValue = row.querySelector('.param-default').value;
                    if (name) {
                        formData.parameters[name] = defaultValue || '';
                    }
                });

                return formData;
            }

            // 仅生成代码按钮点击事件
            document.getElementById('generateCodeBtn').addEventListener('click', function() {
                const formData = collectFormData();

                fetch('/api/mcp-server/generate-code', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(formData)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showMessage('successAlert', '代码生成成功，路径: ' + data.codePath, true);
                    } else {
                        showMessage('errorAlert', data.message || '代码生成失败', false);
                    }
                })
                .catch(error => {
                    showMessage('errorAlert', '请求失败: ' + error.message, false);
                });
            });

            // 创建并部署按钮点击事件
            document.getElementById('createAndDeployBtn').addEventListener('click', function() {
                const formData = collectFormData();

                fetch('/api/mcp-server/create-and-deploy', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(formData)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showMessage('successAlert', '部署成功，服务器URL: ' + data.serverUrl, true);
                    } else {
                        showMessage('errorAlert', data.message || '部署失败', false);
                    }
                })
                .catch(error => {
                    showMessage('errorAlert', '请求失败: ' + error.message, false);
                });
            });

            // 初始化SSH密钥按钮点击事件
            document.getElementById('initializeSshBtn').addEventListener('click', function() {
                const formData = collectFormData();

                fetch('/api/mcp-server/initialize-ssh', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(formData)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showMessage('successAlert', 'SSH密钥初始化成功', true);
                    } else {
                        showMessage('errorAlert', data.message || 'SSH密钥初始化失败', false);
                    }
                })
                .catch(error => {
                    showMessage('errorAlert', '请求失败: ' + error.message, false);
                });
            });
        });
    </script>
</body>
</html>